<template>
  <div class="content">
    <div :style="contentStyle"></div>
    <!--        角色-->
    <div v-for="(article,index) in question.articles"
         :key="index"
         :style="articleStyle(article)"
    ></div>
    <div class="article-content" v-if="hintImageShowing">
      <v-touch v-for="(option,index) in question.optionArticles" :key="index + 100"
           :class="articleOptionClass(option)"
           :style="articleOptionStyle(option,index)"
           @tap="articleTouch(option,$event)">
        <div class="article-img">
          <img :src="option.imageUrl" alt=""
               :style="articleOptionImageStyle(option)">
        </div>
        <div class="article-name">
          {{option.name}}
        </div>
<!--        <Point v-if="!item.operated"  class="pointTouch"/>-->
      </v-touch>
    </div>
  </div>
</template>
<script>
  import { mixins } from "@/common/mixins/assignmentMixins.js"
  import {mapActions} from "vuex";
  // import Point from "../point.vue"
  // eslint-disable-next-line no-unused-vars
  const $ = window.$
  export default {
    mixins: [mixins],
    data(){
      return{
        hintImageShowing: false,
        articleFalse: []
      }
    },
    // components:{
    //   Point
    // },
    beforeMount(){
      if(this.index === this.activeIndex && !this.question.isFinish){
        this.onEnter()
      } else {
        this.hintImageShowing = true
        return
      }
    },
    computed: {
      question() {
        return this.item
      },
      articleStyle(article){
        return function (article) {
          return {
            position: 'absolute',
            left: parseFloat(article.left) / 100 * this.mainWidth + "px",
            top: parseFloat(article.top) / 100 * this.mainHeight + "px",
            width: parseFloat(article.width) / 100 * this.mainWidth + 'px',
            height: parseFloat(article.height) / 100 * this.mainHeight + 'px',
            background: 'url(' + article.imageUrl + ')0 0/100% 100%',
            filter: this.item.isFinish? '' : article.isToMatch? 'drop-shadow(0px 0px 0.5rem rgb(254, 172, 81))' : 'grayscale(1)'
          }
        }
      },
      articleOptionStyle(option,index){
        return function (option,index) {
          const moveX = 20 - index * 10
          return {
            left: 3.5 + index * 10 + 'rem',
            transform: option.isSuc? 'translateX(' + moveX + 'rem)' : '',
            transition: option.isSuc? 'all 0.8s ease 0.2s' : ''
          }
        }
      },
      //背景图片样式
      contentStyle(){
        return {
          height: '100%',
          width: '100%',
          background: "url(" + this.question.background + ")0 0/100% 100%",
          filter: this.item.isFinish? '' : 'grayscale(1)',
          transition: "all 3s",
        }
      },
      //图片样式
      articleOptionImageStyle(option){
        return function (option) {
          return {
            transition: 'all 0.5s',
            option: this.item.isFinish? 0 : 1
          }
        }
      },
      articleOptionClass(option){
        return function (option) {
          const className = ['article-option']
          if(option.isLos) className.push('los')
          if(option.isVanish) className.push('article-vanish')
          return className
        }
      }
    },
    methods: {
      //点击事件
      articleTouch: function (option,event) {
        if(this.item.isFinish){
          return
        }
        this.updateOperated({questionIndex:this.questionIndex,param:this.index})
        setTimeout(()=>{this.parseTextAudio({text: option.name})},100)
        if (option.isMatched) {
          this.$set(option,'isSuc',true)
          this.question.optionArticles.map(item=>{
            if(!item.isMatched){
              this.$set(item,'isVanish',true)
            }
          })
          if(this.isSeedEntery){
            this.setSucLottiePlay()
            setTimeout(()=>{this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})},3000)
          }else {
            setTimeout(()=>{this.perfectMusic()
              this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
            },1000)
          }
          this.addAnswer({
            id: this.item.id,
            type: true
          })
        }
        else {
          this.losMusic()
          if(this.isSeedEntery){
            setTimeout(()=>{this.$emit('nextAssignment')},600)
          } else {
              this.$emit("losShow")
          }
          this.$set(option, 'isLos', true)
          setTimeout(() => {
            this.$set(option, 'isLos', false)
          }, 1000)
          this.addAnswer({
            id: this.item.id,
            type: false
          })
        }
      },
      onEnter:function () {
        clearTimeout(this.showHintImageTimeOut)
        this.showHintImageTimeOut = setTimeout(()=>{ this.hintImageShowing = true },3000);
        this.item.operated = false
        this.question.optionArticles.forEach(item => {
          this.$set(item,'isSuc',false)
          this.$set(item,'isVanish',false)
        })
      },
      ...mapActions("mainStatus", ["setLoading"]),
    },
    watch: {
      activeIndex: function (activeIndex) {
        if (this.index === activeIndex && !this.question.isFinish) this.onEnter()
      }
    }

  }
</script>

<style scoped lang='stylus'>
  @import '../../../common/stylus/content.styl'
  .article-content
    position absolute
    $center('WHLT', 17rem, 8rem)
    animation-name loading-in
    animation-duration 1s
    top 75%
    z-index 99
    .article-option
      position absolute
      $center('WHLT', 7rem, 7rem)
      background url($urlTitle + "assignment/image/page13/角色选择背景.png") 0 0/100% 100%
      padding 0.5rem
      box-sizing border-box
      display table-cell
      vertical-align middle
      text-align center
      .article-img
        position absolute
        $center('WHLT',5rem,4rem)
        top 35%
      .article-img img
        max-width 100%
        max-height 100%
      .article-name
        position absolute
        $center('WHLT',6rem,1rem)
        top 80%
        text-align center
        line-height 1rem
        color #ffa062
        font-family '站酷快乐体'
        font-size 1.1rem
        letter-spacing 0.4rem
        font-weight bold
        text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff
    .article-vanish
      transition all .6s ease .2s
      opacity 0
</style>
